<template>
  <uv-popup ref="popup" round="15">
    <view class="mainWrap textCenter">
      <view class="fz14">身高</view>

      <picker-view :value="sexValue" @change="bindChange" class="picker-view">
        <picker-view-column>
          <view class="timeItem" v-for="(item,index) in heights" :key="index" :class="{active: index ==sexValue[0]}">{{item.name}}</view>
        </picker-view-column>
      </picker-view>

      <view class="button" @click="save">
        <uv-button text="确定" color="#9E06FF" shape="circle" :disabled="counter.slParams.userInfo.isreal!=0"></uv-button>
      </view>
    </view>
  </uv-popup>
</template>

<script setup lang="ts">
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();
const instance = getCurrentInstance();
let props = defineProps(["modelValue"]);
const emit = defineEmits(["update:modelValue"]);

let sexValue = ref([]);

let indicatorStyle = ref({
  height: "50px",
});

let heights = computed(() => {
  return [
    { name: "已婚", value: 1 },
    { name: "未婚", value: 2 },
  ];
});
async function open(birthday, e) {
  instance.refs.popup.open("bottom");
}

function save() {
  let val = heights.value[sexValue.value[0]];
  emit("update:modelValue", val.value);
  instance.refs.popup.close();
}

async function bindChange(e) {
  sexValue.value = e.detail.value;
}

watch(
  () => props.modelValue,
  (newValue, oldValue) => {
    if (newValue) {
      let index = proxy.$utils.findIndexByField(
        heights.value,
        "value",
        newValue
      );
      sexValue.value = [index];
    }
  },
  { deep: true, immediate: true }
);
defineExpose({ open });
</script>



<style lang="scss" scoped>
.mainWrap {
  padding: 25px 35px;
  .constellation {
    background-color: #e9e9e9;
    color: #333333;
    display: inline-block;
    margin-top: 12px;
    padding: 7px 22px;
    border-radius: 4px;
  }

  .picker-view {
    width: 100%;
    height: 150px;
    margin: 25px 0;
    .timeItem {
      line-height: 34px;
      text-align: center;
    }
  }
}
</style>






